<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../rest.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2614180_xbla45bmcn.css">
    <script src="./1.js"></script>
    <style>
        .swiper {
            width: 1226px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
        }

        .swiper .swiper-navigation {
            display: flex;
            padding: 5px 10px;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .swiper .swiper-navigation li {
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            border: 2px solid #fff;
            border-color: hsla(0, 0%, 100%, .3);
            background: rgba(0, 0, 0, .4);
        }

        .swiper .swiper-navigation li:hover {
            background: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
        }

        .swiper .swiper-navigation .active {
            background: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
        }

        .swiper .swiper-wrapper {
            width: 500%;
            position: relative;
            left: 0;
            top: 0;
        }

        .swiper .swiper-wrapper .swiper-item {
            width: 20%;
            float: left;
        }

        .swiper .swiper-wrapper .swiper-item img {
            width: 100%;
        }

        .swiper .prev,
        .swiper .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: all 0.5s;
        }

        .swiper:hover .prev {
            opacity: 1;
            left: 10px;
        }

        .swiper:hover .next {
            opacity: 1;
            right: 10px;
        }

        .swiper .prev i,
        .swiper .next i {
            font-size: 40px;
            color: #666;
        }

        .swiper .prev {
            left: 0px;
        }

        .swiper .next {
            right: 0px;
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper clear">
            <div class="swiper-item"><img src="./images/1.webp" alt=""></div>
            <div class="swiper-item"><img src="./images/2.jpg" alt=""></div>
            <div class="swiper-item"><img src="./images/3.webp" alt=""></div>
            <div class="swiper-item"><img src="./images/4.webp" alt=""></div>
            <div class="swiper-item"><img src="./images/1.webp" alt=""></div>
        </div>
        <ul class="swiper-navigation">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="prev">
            <i class="iconfont icon-zuo"></i>
        </div>
        <div class="next">
            <i class="iconfont icon-you"></i>
        </div>
    </div>
</body>
<script>

    var swiper = document.getElementsByClassName("swiper")[0];
    var swiperWrapper = document.getElementsByClassName("swiper-wrapper")[0];
    var swiperItems = swiperWrapper.getElementsByClassName("swiper-item");
    var nav = document.getElementsByClassName("swiper-navigation")[0];
    var navItems = nav.getElementsByTagName("li");
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];

    var swiperWidth = swiper.clientWidth;  //一张图片的宽度

    var index = 0; //全局遍历 记录轮播的下标
    var timer = null; // 全局变量 记录计时器的编号

    autoPlay(); // 页面加载时 自动轮播 

    // 点击切换
    // 1. 导航和图片一一对应
    // 2. 点一个导航(下标:0) => 向左滚0张
    //    点二个导航(下标:1) => 向左滚1张
    //    点三个导航(下标:2) => 向左滚2张
    //    点四个导航(下标:3) => 向左滚3张

    for (let i = 0; i < navItems.length; i++) {
        let navItem = navItems[i];
        navItem.onclick = function () {
            console.log(this, i);
            index = i; //点击时 记录下标 => 下次轮播时使用
            // 导航切换
            for (var j = 0; j < navItems.length; j++) {
                navItems[j].className = "";
            }
            navItems[i].className = "active";
            console.time("a")
            animate(swiperWrapper, "left", -swiperWidth * i, "slow",)
        }
    }

    // 问题:
    // 第四张切第一张  => 效果不理想  => 反向回滚第一张 => 不好看  => 第四张能否无缝切换第一张?

    // 第四张能否无缝切换第一张?  => 障眼法
    // 在第四张之后 => 添加第五张(同第一张)  => 每次滚动完毕判断是否是第五张 => 如果是第五张瞬间切换(style)第一张

    // 导航切换问题:
    // 五张图片 => 四个导航 => 前四个导航对上前四张图片 => 第五张无法对应(没有第五个导航) 
    // 分析: 由于第五张属于障眼法 => 同第一张 => 所以滚动到第五张时应该将第一个导航变为活跃状态
    function autoPlay() {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            step();
        }, 3000)
    }
    function step() {
        // 左键连点处理(小于最小值)
        if (index < 0) { // 超出第一张(index < 0)
            index = swiperItems.length - 1; // 第五张下标
            swiperWrapper.style.left = -swiperWidth * index + "px";  //切第五张
            index--;  // 第四张下标 =>    => 后续会执行animate()  滚动到第四张
        }
        // 右键连点处理(大于最大值)
        if (index >= swiperItems.length) {  // 判断超出第五张 index >= 5
            index = 0;   // 第一张下标
            swiperWrapper.style.left = 0;  // 直接切到第一张
            index++;  // 切换到第二张   => 后续会执行animate()  滚动到第二张
        }
        // 导航切换
        for (var j = 0; j < navItems.length; j++) {
            navItems[j].className = "";
        }
        // 活跃状态的导航下标 (如果是第五张 将第一个导航变为活跃状态)
        var activeIndex = (index >= swiperItems.length - 1) ? 0 : index;
        navItems[activeIndex].className = "active";
        // 轮播滚动
        animate(swiperWrapper, "left", -swiperWidth * index, "slow", function () {
            console.log("本次运动完毕", index);
            // 每次运动完毕 => 判断是否滚动到第五张(index:4)  
            // swiperItems.length => 五张 =>  5
            if (index >= swiperItems.length - 1) {
                swiperWrapper.style.left = 0; // 切换到第一张
                index = 0;  // 第一张对应下标
            }

        })
    }

    swiper.onmouseenter = function () {
        clearInterval(timer);
    }

    swiper.onmouseleave = function () {
        autoPlay();
    }

    prev.onclick = function () {
        index--;
        step();
    }

    next.onclick = function () {
        index++;
        step();
    }



</script>

</html>